<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import type { FormInstance, FormRules } from "element-plus";
import { useUserStoreHook } from "@/store/modules/user";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
import User from "@iconify-icons/ri/user-3-fill";
import { register } from "@/api/user";

const checked = ref(false);
const loading = ref(false);

// ==========添加用户===========================

const addUser = reactive({
  userName: "",
  phoneNub: "",
  password: "",
  sex: true,
  address: "萍乡学院",
  role: "common"
});
const repeatPassword = ref("");

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  userName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 5, message: "请输入正确名字", trigger: "blur" }
  ],
  phoneNub: [
    { required: true, message: "请输入电话", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确11位手机号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 11, message: "密码太简单了", trigger: "blur" }
  ]
});

const submitAddForm = async (formEl: FormInstance | undefined) => {
  if (repeatPassword.value !== addUser.password) {
    message("两次密码不一致, 请重新输入", { type: "error", duration: 2000 });
    return;
  }
  loading.value = true;
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // 表单校验通过
      console.log("submit!", addUser);
      const result = await register(addUser);
      console.log(result);
      if (result.code == 200) {
        message("注册成功, 快去登入吧", { type: "success", duration: 3000 });
        // 返回登入
        onBack();
      } else {
        loading.value = false;
        message(result.message, { type: "error" });
      }
    } else {
      loading.value = false;
      console.log("error submit!", fields);
    }
  });
};

function onBack() {
  useUserStoreHook().SET_CURRENTPAGE(0);
}
</script>

<template>
  <el-form ref="ruleFormRef" :model="addUser" size="large" :rules="rules">
    <Motion>
      <el-form-item prop="userName">
        <el-input clearable v-model="addUser.userName" placeholder="姓名" :prefix-icon="useRenderIcon(User)" />
      </el-form-item>
    </Motion>

    <Motion :delay="100">
      <el-form-item prop="phoneNub">
        <el-input clearable v-model="addUser.phoneNub" placeholder="电话" :prefix-icon="useRenderIcon(Iphone)" />
      </el-form-item>
    </Motion>

    <Motion :delay="150">
      <el-form-item prop="password">
        <el-input clearable show-password v-model="addUser.password" placeholder="登入密码" :prefix-icon="useRenderIcon(Lock)" />
      </el-form-item>
    </Motion>

    <Motion :delay="200">
      <el-form-item prop="repeatPassword">
        <el-input clearable show-password v-model="repeatPassword" placeholder="确定密码" :prefix-icon="useRenderIcon(Lock)" />
      </el-form-item>
    </Motion>

    <Motion :delay="250">
      <el-form-item>
        <el-button class="w-full" size="default" type="primary" :loading="loading" @click="submitAddForm(ruleFormRef)"> 注册 </el-button>
      </el-form-item>
    </Motion>

    <Motion :delay="300">
      <el-form-item>
        <el-button class="w-full" size="default" @click="onBack"> 返回登入 </el-button>
      </el-form-item>
    </Motion>
  </el-form>
</template>
